<template>
  <div id="app" class="art-list-wrap">
    <!-- load事件绑定的是onLoad方法，是专门用来加载数据的方法 -->
    <!-- finished是用来控制数据是否加载完成的变量。当finished喂false表明数据没加载完，要继续加载；finished为true时代表数据加载完毕，不再加载 -->
    <!-- v-model绑定loading。是用来标记本次是否正在加载的状态，如果为true，代表本次正在加载(会一直转圈)
    特点: 当onLoad被调用时会自动把loading的值改为true -->
    <!-- onLoad方法在什么情况会被调用？
    默认情况下，当列表没有铺满页面时会自动调用
    但在finished为true时，就意味着数据加载完毕了，所以它不会再调用了
    当loading为true时也不会调用，因为loading代表正在加载，服务器认为数据还在加载中，没有必要重新调用加载新的数据 -->
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 使用插槽自定义新闻样式 -->
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          :title="item.title"
          @click="
            $router.push({ path: '/particulars', query: { id: item.art_id } })
          "
        >
          <template #label>
            <!-- 图片区域 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item
                v-for="(item2, index) in item.cover.images"
                :key="index"
              >
                <van-image :src="item2" />
              </van-grid-item>
            </van-grid>
            <!-- 作者信息区域 -->
            <div class="author">
              <span>{{ item.aut_name }}</span>
              <span style="margin:0 12px;">评论数: {{ item.comm_count }}</span>
              <span>{{ item.pubdate | relativeTime }}</span>
              <van-icon name="cross" style="float:right;"></van-icon>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { articleListAPI } from '@/api/index.js'
export default {
  // 接收的参数
  props: {
    channel_id: {
      // 必传参数
      required: true
    }
  },
  data () {
    return {
      list: [], // 保存数据的数组
      loading: false, // 用来标记本次的加载状态
      finished: false, // 用来标记是否加载完毕
      timestamp: Date.now(),
      pullLoading: true
    }
  },
  methods: {
    async onLoad () {
      // 携带参数发起请求
      let res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })
      // console.log(res)

      // 拿到数据后赋值给数组
      // this.list = res.data.data.results
      // 上面的代码有一个问题，数据加时会不断地覆盖前面渲染的数据，导致不会保存之前请求到的数据。所以我们要用追加进行优化
      this.list.push(...res.data.data.results)

      // 将数据中的时间戳赋值给timestamp
      this.timestamp = res.data.data.pre_timestamp

      // 当本次加载完成后进行下次加载
      this.loading = false

      // 判断数据是否加载完毕
      if (!this.timestamp) {
        // 代码进到这里说明数据加载完毕，需要停止加载
        this.finished = true
      }
    },
    async onRefresh () {
      let res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: Date.now()
      })
      // 将数据中的时间戳赋值给timestamp
      this.timestamp = res.data.data.pre_timestamp
      // 注意: 下拉刷新是为了替换最新的新闻
      this.list = res.data.data.results

      this.pullLoading = false
    }
  }
}
</script>

<style scoped lang="less">
.art-list-wrap {
  // 弹性高度
  position: fixed;
  // 定位后，div盒子就不会铺满，所以我们要自己指定高度
  width: 100vw;
  left: 0;
  top: 92px;
  bottom: 50px;
  overflow: auto;
}
</style>
